<template>
  <div>
    <el-button type="text" @click="createItem">创建一项</el-button>
    <div v-for="(item, index) in selectedArr" :key="index" class="margin-16">
      <el-row type="flex" v-for="(jtem, j) in item" :key="j" class="margin-16">
        <el-select v-model="jtem.obj._id" value-key="_id" filterable remote reserve-keyword placeholder="请输入关键词"
          :remote-method="remoteMethod" :loading="loading" @focus="recoderIndex(index, j)">
          <el-option-group v-for="group in jtem.selectOptions" :key="group.type" :label="group.type | getTypeName">
            <el-option v-for="ktem in group.list" :key="ktem._id" :label="ktem.name" :value="ktem._id">
              <span style="float: left">{{ ktem.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ ktem.tag && ktem.tag[0]
                && ktem.tag[0].mid &&
                ktem.tag[0].mid.name }}</span>
            </el-option>
          </el-option-group>
        </el-select>
        <el-input-number v-if="showNum" v-model="jtem.num" controls-position="right" :min="0" :max="1000"
          style="margin-left: 12px"></el-input-number>
        <el-button v-if="!j" type="danger" icon="el-icon-delete" style="margin-left: 12px" @click="deleteItem(index)">
        </el-button>
        <el-button v-if="!j" type="success" icon="el-icon-plus" style="margin-left: 12px" @click="addItem(index)">
        </el-button>
        <el-button v-else type="info" icon="el-icon-minus" style="margin-left: 12px" @click="delSingleItem(index, j)">
        </el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      mid: String,
      showNum: {
        type: Boolean,
        default: true,
      },
      selectedArr: {
        // 已选择的数据
        type: Array,
        default: function () {
          return [
            [
              {
                id: "",
                num: 0,
              },
            ],
          ];
        },
      },
      module: {
        type: Array,
        default: function () {
          // ["materials", "foods", "anims", "natures", "heros", "geographys"]
          return ["materials", "foods", "anims", "natures"];
        },
      },
    },
    data() {
      return {
        currentIndex: 0, // 当前选中下拉框的索引
        cuurentJ: 0,
        loading: false,
      };
    },
    watch: {
      selectedArr(newValue) {
        this.$emit("update:selectedArr", newValue);
      },
    },
    methods: {
      recoderIndex(index, j) {
        this.currentIndex = index;
        this.cuurentJ = j;
      },
      deleteItem(index) {
        this.selectedArr.splice(index, 1);
      },
      addItem(index) {
        this.selectedArr[index].push({
          obj: {
            _id: "",
            num: 0,
          },
        });
      },
      delSingleItem(index, j) {
        this.selectedArr[index].splice(j, 1);
      },
      createItem() {
        this.selectedArr.push([
          {
            obj: {
              _id: "",
              num: 0,
            },
          },
        ]);
      },
      /**
       * @description 获取搜索数据
       * @param {String} query 当前输入的值
       */
      async remoteMethod(query) {
        if (!query) {
          return;
        }
        this.loading = true;
        let response = await this.axios("/search", {
          params: {
            version: this.$store.state.version,
            searchVal: query,
            module: this.module,
            mid: this.mid,
          },
        });
        this.loading = false;
        return (this.selectedArr[this.currentIndex][this.cuurentJ].selectOptions =
          response.data);
      },
    },
    filters: {
      getTypeName(val) {
        let hashMap = {
          foods: "食物",
          anims: "生物",
          hero: "人物",
          geographys: "地理",
          natures: "自然",
          materials: "科技",
        };
        return hashMap[val];
      },
    },
  };
</script>
<style lang="scss" scoped>
  .margin-16:not(:first-of-type) {
    margin-top: 12px;
  }
</style>